<template>
  <view
    class="blind tn-safe-area-inset-bottom"
    style="
      background-image: url('https://yashangxuan.oss-cn-beijing.aliyuncs.com/blind/20230518/19ebd4e6-1d4a-4a89-8afc-c40e88aee54a.png') !important;
    "
  >
    <view class="navbar"
      ><tn-navbar
        z-index="1"
        index-url="/pages/index"
        fixed
        :bottom-shadow="false"
        color="#fff"
        bg-color="rgba(0,0,0,0)"
      ></tn-navbar
    ></view>
    <view class="block"></view>
    <view class="blind-title"> 幸运开盲盒 </view>
    <view class="goods-imgs">
      <view class="swiper">
        <tn-swiper
          class="tn-swiper"
          :data="swiperData"
          indicator-mode="round"
          height="400"
          radius="0"
        ></tn-swiper>
      </view>
    </view>

    <view class="blind-price tn-flex-column">
      <view class="buy-btn"> 立即开箱 </view>
      <view class="price"> ￥169.00元/个 </view>
    </view>
    <!-- 盲盒详情 -->
    <view class="blind-content">
      <view class="blind-content-rules">
        <view class="blind-content-rules-title tn-flex"
          ><view class="bg-left"></view>产出概率<view class="bg-right"></view
        ></view>
        <view class="blind-content-rules-content tn-flex-rows">
          <view class="item tn-flex-column tn-flex-1" v-for="item in ruleData">
            <view class="rule-img"><image :src="item.img" /></view>
            <view class="rule-text">{{ item.name }}</view>
            <view class="rule-odds">{{ item.odds }}%</view>
          </view>
        </view>
      </view>
      <view class="blind-content-desc">开箱必出以下宝贝之一</view>
      <view class="blind-content-goods">
        <view class="blind-content-goods-title tn-flex"
          ><view class="bg-left"></view>盲盒商品<view class="bg-right"></view
        ></view>
        <view class="blind-content-goods-content">
          <view class="goods-item tn-flex" v-for="item in ruleData">
            <view class="goods-item-left tn-flex-1">
              <view class="goods-item-left-img"
                ><image
                  src="https://yashangxuan.oss-cn-beijing.aliyuncs.com/goods/20230512/2b8d6247-0ab7-447b-b329-a3c7a1bb74bb.jpg"
              /></view>
            </view>
            <view class="goods-item-right tn-flex-column tn-flex-2">
              <view class="goods-item-right-name">戴尔DELL笔记本电脑 14英寸性能商务办公轻薄本 灰 微边</view>
              <view class="goods-item-right-price"><span>￥</span>6899</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref, CSSProperties } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import mpHtml from "mp-html/dist/uni-app/components/mp-html/mp-html.vue";
import useSystemInfo from "@/tuniao-ui/libs/hooks/useSystemInfo";
import TnNavbar from "@/tuniao-ui/components/tn-navbar/src/Navbar.vue";
import TnSwiper from "@/tuniao-ui/components/tn-swiper/src/Swiper.vue";
import TnTag from "@/tuniao-ui/components/tn-tag/src/Tag.vue";
import TnIcon from "@/tuniao-ui/components/tn-icon/src/Icon.vue";
import TnButton from "@/tuniao-ui/components/tn-button/src/Button.vue";
import TnPopup from "@/tuniao-ui/components/tn-popup/src/Popup.vue";
import TnToast from "@/tuniao-ui/components/tn-toast/src/Toast.vue";
import { SwiperData } from "@/tuniao-ui/types";
import { formatPrice } from "@/tuniao-ui/utils";

const swiperData: SwiperData[] = [
  {
    image:
      "https://yashangxuan.oss-cn-beijing.aliyuncs.com/goods/20230512/2b8d6247-0ab7-447b-b329-a3c7a1bb74bb.jpg",
  },
  {
    image:
      "https://yashangxuan.oss-cn-beijing.aliyuncs.com/goods/20230512/2b8d6247-0ab7-447b-b329-a3c7a1bb74bb.jpg",
  },
];

const ruleData = [
  {
    id: "bronze",
    img: "https://yashangxuan.oss-cn-beijing.aliyuncs.com/blind/grade1.png",
    name: "青铜",
    odds: 50.6,
  },
  {
    id: "silver",
    img: "https://yashangxuan.oss-cn-beijing.aliyuncs.com/blind/grade2.png",
    name: "白银",
    odds: 30.4,
  },
  {
    id: "gold",
    img: "https://yashangxuan.oss-cn-beijing.aliyuncs.com/blind/grade3.png",
    name: "黄金",
    odds: 13.0,
  },
  {
    id: "platinum",
    img: "https://yashangxuan.oss-cn-beijing.aliyuncs.com/blind/grade4.png",
    name: "铂金",
    odds: 5.0,
  },
  {
    id: "diamond",
    img: "https://yashangxuan.oss-cn-beijing.aliyuncs.com/blind/grade5.png",
    name: "钻石",
    odds: 1.0,
  },
];
</script>

<style lang="scss" scoped>
@font-face {
  font-family: YouSheBiaoTiHei;
  src: url("https://yashangxuan.oss-cn-beijing.aliyuncs.com/font/YOUSHEBIAOTIHEI.TTF");
}
body {
  background-color: #000;
}
.navbar {
  color: #fff;
  height: 50px;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 99;
}

.blind {
  background-repeat: no-repeat;
  background-size: 100%;

  .block {
    height: 100rpx;
    width: 100%;
  }
  &-title {
    font-family: YouSheBiaoTiHei;
    font-size: 130rpx;
    color: #fff;
    text-align: center;
    z-index: 99;
    color: #73e1ff;
  }

  .goods-imgs {
    margin-top: 40rpx;
    display: flex;
    justify-content: center;
    width: 100%;
    background-image: url("../../static/images/blind_box/blind_base.png");
    background-repeat: no-repeat;
    background-size: 567rpx 182rpx;
    background-position: bottom center;
    min-height: 590rpx;
    .swiper {
      width: 450rpx;
      height: 450rpx;
      padding: 15px;
      background-image: linear-gradient(to bottom, #b7f0ff, #73e1ff);
      border-radius: 50rpx;
      .tn-swiper {
        border-radius: 50rpx;
      }
    }
  }

  &-price {
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: YouSheBiaoTiHei;
    .buy-btn {
      width: 400rpx;
      height: 130rpx;
      background-image: url("../../static/images/blind_box/btn_bg.png");
      background-size: 100%;
      border-radius: 50rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 54rpx;
      color: #fff;
    }
    .price {
      font-size: 34rpx;
      color: #fff;
      margin-left: 20rpx;
      font-weight: 400;
      margin-top: 15rpx;
    }
  }

  &-content {
    margin-top: 40rpx;
    padding: 0 20rpx;
    padding-bottom: 100rpx;
    .bg-left,
    .bg-right {
      background-image: url("../../static/images/blind_box/title_left.png");
      background-repeat: no-repeat;
      background-size: 100%;
      background-position: center;
      height: 20rpx;
      width: 40rpx;
      margin: 0 20rpx;
    }
    .bg-right {
      background-image: url("../../static/images/blind_box/title_right.png");
    }

    &-rules {
      background-color: #fff;
      border-radius: 40rpx;
      &-title {
        font-size: 34rpx;
        color: #000;
        padding: 20rpx 0;
        font-weight: 500;
        justify-content: center;
        align-items: center;
      }

      &-content {
        padding: 0 20rpx;
        .item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 20rpx 0;

          .rule-img {
            width: 100rpx;
            height: 100rpx;
            image {
              width: 100%;
              height: 100%;
            }
          }
          .rule-text {
            font-family: YouSheBiaoTiHei;
            font-size: 28rpx;
            color: #000;
          }
          .rule-odds {
            font-size: 22rpx;
            color: #000;
          }
        }
      }
    }

    &-desc {
      font-size: 24rpx;
      color: #fff;
      margin-top: 40rpx;
      font-weight: 400;
      text-align: center;
    }
    &-goods {
      margin-top: 30rpx;
      background-color: #fff;
      border-radius: 40rpx;
      &-title {
        font-size: 34rpx;
        color: #000;
        padding: 20rpx 0;
        font-weight: 500;
        justify-content: center;
        align-items: center;
      }
      &-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        .goods-item {
          width: 100%;
          height: 250rpx;
          border-radius: 20rpx;
          margin: 10rpx 0;
          padding: 20rpx;
          &-left {
            height: 100%;
            justify-content:center;
            align-items: center;
            &-img {
              height: 200rpx;
              width: 200rpx;
              image {
                height: 100%;
                width: 100%;
              }
            }
          }
          &-right {
            height: 100%;
            padding: 0 20rpx;
            &-name, &-price {
              font-size: 28rpx;
              color: #15151D;
              height: 50%;
            }

            &-price {
              font-weight: 500;
              display: flex;
              align-items: flex-end;
              font-size: 36rpx;
              span {
                font-size: 24rpx;
              }
            }
          }
        }
      }
    }
  }
}
</style>
